<template>
  <section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
      <!-- 背景圆 -->
      <div class="circle" style="--x:0"></div>
      <div class="circle" style="--x:1"></div>
      <div class="circle" style="--x:2"></div>
      <div class="circle" style="--x:3"></div>
      <div class="circle" style="--x:4"></div>
      <!-- 注册框 -->
      <div class="container">
        <div class="form">
          <h2>注册</h2>
          <!-- 使用原生表单和 Vue 的双向数据绑定 -->
          <form @submit.prevent="register">
            <div class="inputBox">
              <input type="text" v-model="registerData.username" placeholder="请输入用户名" />
              <span v-if="errors.username" class="error">{{ errors.username }}</span>
            </div>
            <div class="inputBox">
              <input type="email" v-model="registerData.email" placeholder="请输入邮箱" />
              <span v-if="errors.email" class="error">{{ errors.email }}</span>
            </div>
            <div class="inputBox">
              <input type="text" v-model="registerData.telephone" placeholder="请输入号码" />
              <span v-if="errors.telephone" class="error">{{ errors.telephone }}</span>
            </div>
            <div class="inputBox">
              <input type="password" v-model="registerData.password" placeholder="请输入密码" />
              <span v-if="errors.password" class="error">{{ errors.password }}</span>
            </div>
            <div class="inputBox">
              <input type="password" v-model="registerData.rePassword" placeholder="请确认密码" />
              <span v-if="errors.rePassword" class="error">{{ errors.rePassword }}</span>
            </div>
            <div class="inputBox">
              <input type="submit" value="注册" />
            </div>
          </form>
          <p class="forget">返回登录？<a href="/login">登录</a></p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import { userRegisterService } from '@/api/user.js'

// 定义数据模型
const registerData = ref({
  username: '',
  email: '',
  telephone: '',
  password: '',
  rePassword: ''
})

// 用来存储表单的错误信息
const errors = ref({
  username: '',
  email: '',
  telephone: '',
  password: '',
  rePassword: ''
})

// 校验规则
const validate = () => {
  let valid = true
  // 清空错误信息
  errors.value = {
    username: '',
    email: '',
    telephone: '',
    password: '',
    rePassword: ''
  }

  // 校验用户名
  if (!registerData.value.username) {
    errors.value.username = '请输入用户名'
    valid = false
  } else if (registerData.value.username.length < 5 || registerData.value.username.length > 16) {
    errors.value.username = '用户名长度应为5~16个字符'
    valid = false
  }

  // 校验邮箱
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
  if (!registerData.value.email) {
    errors.value.email = '请输入邮箱'
    valid = false
  } else if (!emailRegex.test(registerData.value.email)) {
    errors.value.email = '邮箱格式不正确'
    valid = false
  }

  // 校验电话号码（假设为国内手机号）
  const phoneRegex = /^[1][3-9][0-9]{9}$/
  if (!registerData.value.telephone) {
    errors.value.telephone = '请输入电话号码'
    valid = false
  } else if (!phoneRegex.test(registerData.value.telephone)) {
    errors.value.telephone = '电话号码格式不正确'
    valid = false
  }

  // 校验密码
  if (!registerData.value.password) {
    errors.value.password = '请输入密码'
    valid = false
  } else if (registerData.value.password.length < 5 || registerData.value.password.length > 16) {
    errors.value.password = '密码长度应为5~16个字符'
    valid = false
  }

  // 校验重复密码
  if (!registerData.value.rePassword) {
    errors.value.rePassword = '请再次确认密码'
    valid = false
  } else if (registerData.value.rePassword !== registerData.value.password) {
    errors.value.rePassword = '两次输入的密码不一致'
    valid = false
  }

  return valid
}

// 调用后台接口，完成注册
const register = async () => {
  const isValid = validate()
  if (isValid) {
    try {
      const result = await userRegisterService(registerData.value)
      alert(result.msg || '注册成功')
    } catch (error) {
      alert('注册失败，请稍后再试')
      console.error(error)
    }
  } else {
    alert('表单校验失败，请检查输入')
  }
}

// 清空数据模型
const clearRegisterData = () => {
  registerData.value = {
    username: '',
    email: '',
    telephone: '',
    password: '',
    rePassword: ''
  }
}
</script>

<style scoped src="@/assets/reg-log.css">
/* 输入框样式 */
.inputBox {
  margin-bottom: 20px;
  position: relative;
}

input {
  width: 100%;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

/* 错误提示样式 */
.error {
  color: red;
  font-size: 12px;
  position: absolute;
  bottom: -18px;
  left: 0;
}

.forget {
  margin-top: 20px;
  text-align: center;
}

.forget a {
  color: #007bff;
  text-decoration: none;
}

.forget a:hover {
  text-decoration: underline;
}
</style>

